<template>
	<view class="vip" :style="{'--price':vuex_config.price,'--color':vuex_config.themeColor1}">
		<view class="user">
			<image class="user-img" :src="vuex_user.headimgurl ||'../static/logo.png'"></image>
			<view class="user-title">
				<text class="u-font-28">{{vuex_user.nickname}}</text>
				<text
					class="u-font-24">您当前是{{vuex_user.member_status == 0?'普通用户':'VIP会员'}}，{{vuex_user.member_status == 0?'开通会员即可享受VIP特权':'续费会员可继续享受VIP特权'}}</text>
			</view>
		</view>
		<view class="box">
			<view class="box-title">请选择开通套餐</view>
			<view class="list">
				<view :class="current == index ?'item active':'item'" v-for="(item,index) in dataList" :key='index'
					@click="change(index)">
					<view class="left">
						<text class="title">{{item.name}}</text>
						<text class="ftitle" v-if="item.title">({{item.title}})</text>
					</view>
					<view class="right">￥{{item.amount}}</view>
				</view>
			</view>
		</view>
		<view class="info_box" v-if="vuex_business.member_description">
			<u-parse :html="vuex_business.member_description"></u-parse>
		</view>

		<view class="footer_relat" v-if="dataList[current]?true:false">
			<view class="footer">
				<view class="f-left">
					<text class="left-title">总价：</text>
					<text class="left-price">￥{{dataList[current].amount}}</text>
				</view>
				<view class="f-right" @click="onSubmit">去支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDiff
	} from '@/utils/moment/index'
	import {
		payOrder
	} from '@/mixins/payOrder.js'
	import {
		wxConfig
	} from '@/mixins/wxConfig';
	import {
		mapActions,
	} from 'vuex';
	export default {
		mixins: [payOrder, wxConfig],
		data() {
			return {
				dataList: [],
				current: 0,
			}
		},
		onLoad() {
			// #ifdef H5
			this.initWxConfig(['chooseWXPay']).then(() => {}).catch(() => {});
			// #endif
			this.initPage()
		},
		methods: {
			...mapActions(['loadUserInfo']),
			initPage() {
				this.$loading()
				this.$resPost('GetMembershipFeesList', {}).then(res => {
					this.dataList = res.data
					this.$hide()
				})
			},
			change(idx) {
				this.current = idx
			},
			onSubmit() {
				if (this.vuex_user.member_status == 1 && this.vuex_user.expire_date) {
					let day = getDiff(new Date(), this.vuex_user.expire_date)
					day += this.dataList[this.current].time
					if (day > 365 * 3) {
						this.$toast('会员续费时间不能超过3年')
						return
					}
				}
				let params = {
					fees_id: this.dataList[this.current].pk_id,
					amount: this.dataList[this.current].amount,
					status: 0
				}
				let pay_type = 1

				// #ifdef MP-ALIPAY
				pay_type = 7
				// #endif 

				// #ifdef MP-BAIDU
				pay_type = 8
				// #endif 

				// #ifdef MP-TOUTIAO
				pay_type = 9
				// #endif 

				this._submitOrder(params, {
					totalPrice: this.dataList[this.current].amount,
					pay_type: pay_type,
					orderApi: 'AddMembershipRecord',
					updateApi: 'UpdateMembershipRecordStatus',
					redirectUrl: '',
				}).then((res) => {})
			},
			// 重写更新接口
			updateOrder(order_no, opts) {
				return this.$resPost(opts.updateApi, {
					order_no: order_no,
					status: 1,
					num: this.dataList[this.current].time,
					frequency: this.dataList[this.current].num
				}, {}, {
					timeout: '请求超时，请联系客服'
				}).then((res) => {
					this.$toast('购买成功')
					let userInfo = {
						...this.vuex_user,
						users_webchat_id: this.vuex_user.pk_id,
						users_id: this.vuex_user.fk_users_id,
						type: 2,
					}
					this.$resPost('SetApplyDistributor', userInfo).then()
					this.loadUserInfo().then(() => {
						// 从资讯页过来需要刷新一下
						setTimeout(() => {
							this.uniBack(1)
						}, 700)
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.vip {
		.user {
			width: 100%;
			height: 130rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			background: linear-gradient(135deg, #cda25e, #9f7e4b);

			.user-img {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.user-title {
				display: flex;
				flex-direction: column;
				color: #fff;
			}
		}

		.box {
			padding: 40rpx 26rpx 0;

			.box-title {
				font-size: 30rpx;
				padding-bottom: 20rpx;
				font-weight: bold;
			}

			.list {
				width: 100%;

				.item {
					width: 100%;
					padding: 40rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-radius: 10rpx;
					border: 1px solid #f1f1f1;
					margin-bottom: 20rpx;

					&.active {
						background-color: #fafdea;
						border-color: #cda25e;
					}

					.left {
						display: flex;
						align-items: center;
						width: 80%;

						.title {
							font-weight: bold;
							font-size: 28rpx;
						}

						.ftitle {
							font-size: 24rpx;
							color: #999;
							margin-left: 10rpx;
						}
					}

					.right {
						color: var(--price);
						font-size: 28rpx;
					}
				}
			}
		}

		.info_box {
			margin: 80rpx 0 50rpx;
			padding: 0 20rpx;
		}

		.footer_relat {
			height: 100rpx;
		}

		.footer {
			position: fixed;
			bottom: 0;
			background-color: #fff;
			padding-bottom: env(safe-area-inset-bottom);
			height: 80rpx;
			width: 100%;
			box-sizing: content-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.f-left {
				display: flex;
				align-items: flex-end;
				margin-left: 30rpx;
				font-weight: bold;

				.left-title {
					font-size: 24rpx;
					position: relative;
					bottom: 4rpx;
				}

				.left-price {
					font-size: 28rpx;
					color: var(--price);
				}
			}

			.f-right {
				height: 100%;
				width: 300rpx;
				background-color: var(--color);
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}
	}
</style>
